#big{
    width:200px;
    height:200px;
    border-radius:50%;
    background:blue;
    position:relative;


}

.zh{
    width:180px;
    height:180px;
    border-radius:50%;
    background:green;
    margin-top:10px;
    margin-left:10px;
    position:absolute;
    transition:all 3s;
    -webkit-transition:all 1s ;



}
#big:hover .zh{
    box-shadow:  0 0 0 10px green;
}
#big:hover .xiao{
    opacity: 1;
    /*-webkit-transform: scale(0);*/
    /*-moz-transform: scale(1);*/
    /*-o-transform: scale(1);*/
    /*-ms-transform: scale(1);*/
    transform: scale(1);

}
.xiao{
    position: absolute;
    background: rgba(25, 105, 14, 0.61);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    opacity: 0;
    transition:all 3s;
    -webkit-transition:all 1s ;
    /*-webkit-transform: scale(0);*/
    /*-moz-transform: scale(0);*/
    /*-o-transform: scale(0);*/
    /*-ms-transform: scale(0);*/
    transform: scale(0);
}
.xiao h2{
    text-align:center;
}
.xiao p{
    text-align:center;
    line-height:100px;
}
